import React from 'react';
import { pieColors } from '../config';
import {formatNumber} from '../utils/tools';

export default function ItemTable({data, title}) {
  let color_index = 0;
  return (
    <div>
      <div className="detail_list_title">
        <span>
          {title}
        </span>
      </div>
      <div className="detail_list">
        {
          data.items.map((item, index) => {
            let color = pieColors[color_index];
            color_index++;
            color_index %= pieColors.length;
            let style = {
              backgroundColor: color,
              boxShadow: '0px 2px 3.92px 0.08px rgba(119, 0, 115, 0.3)',
              borderRadius: '2px'
            };
            return (
              <div key={index} className="detail_list_item">
                <div className="detail_list_color" style={style}>
                </div>
                <div className="detail_list_name">
                  {item.name}
                </div>
                <div className="detail_list_value">
                  {formatNumber(item.value)}
                </div>
              </div>
            );
          })
        }
      </div>
    </div>
  );
}